<template>
  <div class="breadcrumb">
    <div class="container">
      <router-link to="/">首页</router-link>
      <span class="separator">/</span>
      <router-link to="/tools">工具</router-link>
      <template v-if="currentToolName">
        <span class="separator">/</span>
        <span class="current">{{ currentToolName }}</span>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const currentToolName = computed(() => {
  const toolPath = route.path.split('/').pop()
  switch (toolPath) {
    case 'timestamp':
      return '时间戳转换'
    case 'qrcode':
      return '二维码生成器'
    case 'websocket':
      return 'WebSocket测试'
    case 'json':
      return 'JSON工具'
    case 'drools':
      return 'Drools规则生成器'
    case 'crypto':
      return '加解密工具'
    default:
      return ''
  }
})
</script>

<style scoped lang="scss">
.breadcrumb {
  background: white;
  border-bottom: 1px solid #eee;
  padding: 12px 0;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;

    &:hover {
      color: var(--hover-color);
    }
  }

  .separator {
    color: #ccc;
  }

  .current {
    color: #666;
  }
}
</style> 